<template>
  <div class="meal card_b" style="" @click="goDishesDetails">
    <!-- 套餐 -->
    <div class="flex" style="height: 100%;display: flex;" v-if="item.comboId">
      <img v-if="item.coverImage && JSON.parse(item.coverImage).length" :src="JSON.parse(item.coverImage)[0].url"
        mode="aspectFill" style="width: 70px;height: 70px;border-radius: 8px;" />
      <div class="combo">
        <div>
          <div class="flex_between">
            <span style="font-size: 20px;">{{ item.comboName }}</span>
          </div>

          <div class="describe">
            <div v-for="i in item.listItem" :key="i.id">
              <span v-if="i.type == 1">主菜：{{ i.foodDish.foodName }}
                <span v-if="i.foodDish.huisType == 1" style="margin-top: 0px;margin-left: 5px;">
                  🐷
                </span>
                <span style="margin-top: -2px;margin-left: 5px;padding-top: 5px;">
                  <span v-for="value in Number(i.foodDish.peType)">
                    🌶
                  </span>
                </span>
              </span>
              <span v-else-if="i.type == 2">配菜：{{ i.foodDish.foodName }}
                 <span v-if="i.foodDish.huisType == 1" style="margin-top: 0px;margin-left: 5px;">
                  🐷
                </span>
                <span style="margin-top: -2px;margin-left: 5px;padding-top: 5px;">
                  <span v-for="value in Number(i.foodDish.peType)">
                    🌶
                  </span>
                </span>
              </span>
              <span v-else-if="i.type == 3">主食：{{ i.foodDish.foodName }}
                 <span v-if="i.foodDish.huisType == 1" style="margin-top: 0px;margin-left: 5px;">
                  🐷
                </span>
                <span style="margin-top: -2px;margin-left: 5px;padding-top: 5px;">
                  <span v-for="value in Number(i.foodDish.peType)">
                    🌶
                  </span>
                </span>
              </span>
              <span v-else-if="i.type == 4">汤类：{{ i.foodDish.foodName }}
                 <span v-if="i.foodDish.huisType == 1" style="margin-top: 0px;margin-left: 5px;">
                  🐷
                </span>
                <span style="margin-top: -2px;margin-left: 5px;padding-top: 5px;">
                  <span v-for="value in Number(i.foodDish.peType)">
                    🌶
                  </span>
                </span>
              </span>
            </div>
          </div>
        </div>

        <div class="bottom_b flex_between" @click.stop>
          <div class="flex_align_conter">
            <span class="f10" style="font-size: 12px;">￥</span>
            <span class="f14" style="font-weight: bold;font-size: 16px;">{{ item.price || 0 }}</span>
            <span style="font-size: 12px;color: #9F9F9F;margin-left: 15px;">
              库存：{{ item.num - item.sales }}
            </span>
          </div>


        </div>
      </div>
    </div>

    <!-- 菜品 -->
    <div class="flex" style="height: 100%;" v-else-if="item.foodId">
      <image v-if="item.image && JSON.parse(item.image).length" :src="JSON.parse(item.image)[0].url" mode="aspectFill"
        style="width: 70px;height: 70px;border-radius: 8px;" />
      <div class="combo">
        <div>
          <div class="flex_between">
            <span>{{ item.foodName }}</span>
            <span v-if="item.sales" class="sales">销量：{{ item.sales < 0 ? 0 : item.sales }}</span>
          </div>

          <div class="describe">
            <div v-if="item.taste && tableCuisine.口味 == 1">口味：{{ item.taste }}</div>

            <div v-if="item.foodIngredientsDishList && item.foodIngredientsDishList.length && tableCuisine.食材清单 == 1"
              class="ingredient-list flex_align_conter">
              <span>食材：</span>
              <span v-for="(i, idx) in item.foodIngredientsDishList" :key="idx">
                {{ i.ingredientsName }}
                <span v-if="idx !== item.foodIngredientsDishList.length - 1">、</span>
              </span>
            </div>

            <div v-if="item.allergy && tableCuisine.过敏源 == 1">过敏源：{{ item.allergy }}</div>
          </div>
        </div>

        <div class="bottom_b flex_between" @click.stop>
          <div class="flex_align_conter">
            <span class="f10">￥</span>
            <span class="f14" style="font-weight: 500;">{{ item.price || 0 }}</span>
            <span style="font-size: 16rpx;color: #9F9F9F;margin-left: 20rpx;">
              库存：{{ item.num - item.sales }}
            </span>
          </div>


        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listData } from '@/api/system/dict/data'

export default {
  props: {
    item: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      tableColumn: {},
      tableCuisine: {}
    }
  },
  mounted() {
    console.log(this.item.foodId)
    //   this.dictdata()
  },
  methods: {
    async dictdata() {
      const [res1, res2] = await Promise.all([
        listData({ dictType: 'combo_column', pageSize: 99, pageNum: 1 }),
        listData({ dictType: 'cuisine_column', pageSize: 99, pageNum: 1 })
      ])
      this.tableColumn = Object.fromEntries(res1.rows.map(r => [r.dictLabel, r.dictValue]))
      this.tableCuisine = Object.fromEntries(res2.rows.map(r => [r.dictLabel, r.dictValue]))
    },
    goDishesDetails() {
      if (this.item.foodId) {
        this.$tab.navigateTo(
          `/pages/reserve/dishesDetails?id=${this.item.foodId}&lzy_id=${this.item.lzy_id}&saleNum=${this.item.saleNum || 0}`
        )
      } else if (this.item.comboId) {
        this.$emit('comboDetails', this.item)
      }
    },
    addNum() {
      const { saleNum, limitPerUser, num, sales } = this.item
      if (limitPerUser !== '-1' && saleNum >= Number(limitPerUser)) {
        return this.$modal.msg('超出限购数量')
      }
      if (saleNum >= num - sales) return this.$modal.msg('库存不足')
      this.changeValue(saleNum + 1 || 1)
    },
    subtractNum() {
      if (this.item.saleNum > 0) this.changeValue(this.item.saleNum - 1)
    },
    changeValue(val) {
      this.$emit('updateNum', this.item, val)
    }
  }
}
</script>

<style lang="scss" scoped>
.meal {
  margin-top: 10px;

  .combo {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    flex: 1;
    margin-left: 20px;

    .sales {
      font-size: 16px;
      color: #9f9f9f;
    }
  }

  .describe {
    font-weight: 350;
    margin-top: 4px;
    font-size: 11px;
    color: #9f9f9f;
  }
}

.card_b {
  padding: 13px;
  border-radius: 9px;
  background: #FFFFFF;
}
</style>